.img-menu {
	height: 80px !important;
    margin-top: 10px !important;
}

.item {
    padding: 10px !important;
    cursor: pointer !important;
    margin: auto auto !important;
    max-width: 300px !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.item:hover {
    border-radius: 12px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Efecto de clic suave */
.item:active {
    transform: translateY(0px) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* Efecto de ondas al hacer clic */
.item::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.4s, height 0.4s !important;
    pointer-events: none !important;
}

.item:active::after {
    width: 200px !important;
    height: 200px !important;
}

.text-item {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: auto auto !important;
    color: #ffff !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.3s ease !important;
}

/* Cambio de color del texto en hover */
.item:hover .text-item{
    color: #342ead !important;
}

/* Animación sutil de hover */
.item:hover {
    animation: gentle-glow 1.5s ease-in-out infinite alternate !important;
}

@keyframes gentle-glow {
    from {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    to {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    }
}

/* === OPTIMIZACIÓN DE RENDIMIENTO GLOBAL === */

/* Suavizado universal para toda la página */
* {
    box-sizing: border-box !important;
}

html {
    scroll-behavior: smooth !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}